---
title: global-dict
subTitle: 全局字典管理方案
---
<template>
  <div v-if="optionsMap">
    <div>
      全局管理系统字典方案：使用全局注册的 “$getOptionsMap”方法， 传入一个数组参数，并返回一个 对象集合
    </div>
    <hr/>
    <div>
     将 cityCode: '610404' 转换为 <span>{{cityCode|formatFilter('CITY')}}</span>
    </div>
    <div>
     将 custCode: '610404' 转换为 <span>{{cityCode|formatFilter('CustDicts')}}</span>
    </div>
    <hr/>
    <div>
      <my-select v-model="name" :options="optionsMap.test"></my-select>
    </div>
    <div>
      <el-button @click="test">获取CustDicts字典集合</el-button>
    </div>
  </div>
</template>
<script>
// import {getOptionMap} from '@/helper/dict-management/index'
export default {
  components: {},
  props: {
  },
  data() {
    return {
      optionsMap: null,
      cityCode: '610404',
      name: ''
    }
  },
  computed: {
  },
  methods: {
    // getOptionMap,
    test() {
      const result = this.$getOptionMap('CustDicts')
      console.log(result)
    },
    getDictOpts() {
      this.$getOptionsMap([
        {name: 'city', code: 'CITY'},
        {name: 'chengshi', code: 'CITY'},
        {name: 'org', code: 'DEPTS'},
        {
          name: 'test', 
          code: 'CustDicts', 
          custFetch: () => {
            const arr = [
              {dictCode: '610404', dictName: '渭城区', parentCode: '610400', sortNo: 1},
              {dictCode: '141127', dictName: '岚县', parentCode: '141100', sortNo: 1},
              {dictCode: '710409', dictName: '丰原区', parentCode: '710400', sortNo: 1}
            ]
            const _arr = arr.map((item) => {
              return {
                ...item,
                id: item.dictCode,
                parentId: item.parentCode,
                label: item.dictName,
                value: item.dictCode
              }
            })
            return Promise.resolve(_arr)
          }
        }
      ]).then((res) => {
        console.log(res, '===')
        this.optionsMap = res
      })
    }
  },
  created() {
    this.getDictOpts()
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
</style>